<template>
  <div>
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item :label="searchLabel">
          <el-input v-model="searchForm.keyword" :placeholder="searchPlaceholder" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ tableTitle }}</span>
          <el-button v-if="showAddButton" type="primary" @click="handleAdd">新增{{ itemName }}</el-button>
        </div>
      </template>

      <el-table 
        :data="tableData" 
        border 
        :style="{ width: tableWidth }"
        v-loading="loading"
      >
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
        >
          <template #default="scope" v-if="column.formatter">
            <component :is="column.formatter(scope.row, column)" />
          </template>
          <template #default="scope" v-else-if="column.slot">
            <slot :name="column.slot" :row="scope.row" :column="column" :scope="scope"></slot>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="actionWidth" v-if="showActions">
          <template #default="scope">
            <slot name="actions" :row="scope.row" :scope="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button 
                size="small" 
                type="danger" 
                @click="handleDelete(scope.row)"
                v-if="!isUndeletable || !isUndeletable(scope.row)"
              >
                删除
              </el-button>
            </slot>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container" v-if="showPagination">
        <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const props = defineProps({
  // 搜索相关
  searchLabel: {
    type: String,
    default: '搜索'
  },
  searchPlaceholder: {
    type: String,
    default: '请输入关键词'
  },
  
  // 表格相关
  tableTitle: {
    type: String,
    default: '管理列表'
  },
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  },
  tableWidth: {
    type: String,
    default: '100%'
  },
  
  // 分页相关
  showPagination: {
    type: Boolean,
    default: true
  },
  pagination: {
    type: Object,
    default: () => ({
      pageNum: 1,
      pageSize: 10,
      total: 0
    })
  },
  
  // 操作相关
  showAddButton: {
    type: Boolean,
    default: true
  },
  showActions: {
    type: Boolean,
    default: true
  },
  actionWidth: {
    type: Number,
    default: 200
  },
  itemName: {
    type: String,
    default: '项目'
  },
  isUndeletable: {
    type: Function,
    default: null
  }
})

const emit = defineEmits([
  'search',
  'reset',
  'add',
  'edit',
  'delete',
  'size-change',
  'current-change'
])

// 搜索表单
const searchForm = reactive({
  keyword: ''
})

// 搜索事件
const handleSearch = () => {
  emit('search', searchForm.keyword)
}

// 重置事件
const handleReset = () => {
  searchForm.keyword = ''
  emit('reset')
}

// 新增事件
const handleAdd = () => {
  emit('add')
}

// 编辑事件
const handleEdit = (row) => {
  emit('edit', row)
}

// 删除事件
const handleDelete = (row) => {
  emit('delete', row)
}

// 分页大小变化
const handleSizeChange = (val) => {
  emit('size-change', val)
}

// 当前页变化
const handleCurrentChange = (val) => {
  emit('current-change', val)
}

// 定义暴露给父组件的方法
defineExpose({
  searchForm
})
</script>

<style scoped>
.search-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>